<template>
	<view class="chargeDtailPage">
		<u-toast ref="noticelogin" />
		<!-- 上面充电站标题部分 -->
		<view class="chargeDtailPage-top">
			<!-- 左边图片 -->
			<view class="">
				<image class="chargeDtailPage-top-image" src="../../static/images/lrx/chargedetail@3x.png"></image>
			</view>

			<!-- 充电站介绍 -->
			<view class="chargeDtailPage-top-content">
				<view class="chargeDtailPage-title">
					{{detailData.shopName}}
				</view>
				<view class="chargeDtailPage-topaddress">
					<!-- 四川省成都市成华区崔家店574号（加油站）旁 -->
					{{detailData.address}}
				</view>
				<view class="chargeDtailPage-toptags">
					<text class="tagsitems">全天开放</text>
					<text class="tagsitems">美食</text>
					<text class="tagsitems">餐饮</text>
				</view>
				<view class="chargeDtailPage-topprices">
					￥<text class="redprice">{{detailData.price?detailData.price.toFixed(3):''}}</text>元/度
				</view>
			</view>

			<!-- 右边导航图  -->
			<view class="chargeDtailPage-toprigghtnav">
				<image class="chargeDtailPage-rightimage" @tap="gaoDedaohang(detailData.lat,detailData.lng)"
					src="../../static/images/lrx/icon_confirmednav@3x.png">
				</image>
				<text
					class="chargeDtailPage-righttitle">{{detailData.distance?detailData.distance.value.toFixed(2):1.23}}km</text>
			</view>
		</view>


		<!-- 电站信息 -->
		<view class="chargeInfor">
			<!-- 标题 -->
			<view class="chargeInfor-detail">
				<text>电站信息</text>
			</view>
			<!-- 电站信息 -->
			<view class="chargeInfor-detailInfor">
				<view class="chargeInfor-titletop">
					<text class="chargeInfor-yyxq">营业详情</text>
					<view class="kfitems">
						开放时间：00:00-24:00
					</view>
					<view class="kfitems">
						发票类型：星星充电电子发票
					</view>
					<view class="kfitems">
						客服电话：{{detailData.telephone}}
					</view>
				</view>
				<view class="chargeInfor-titlearoud">
					<text class="chargeInfor-zbss">周边设施</text>
					<view class="chargeInfor-list">
						<view class="chargeInfor-listitem">
							<image class="chargeInfor-listimg" src="../../static/images/lrx/icon_food@3x.png" mode="">
							</image>
							<text class="chargeInfor-listtext">美食</text>
						</view>
						<view class="chargeInfor-listitem">
							<image class="chargeInfor-listimg" src="../../static/images/lrx/icon_clear@3x.png" mode="">
							</image>
							<text class="chargeInfor-listtext">洗车</text>
						</view>
						<view class="chargeInfor-listitem">
							<image class="chargeInfor-listimg" src="../../static/images/lrx/icon_rest@3x.png" mode="">
							</image>
							<text class="chargeInfor-listtext">休息室</text>
						</view>
						<view class="chargeInfor-listitem">
							<image class="chargeInfor-listimg" src="../../static/images/lrx/icon_toilet@3x.png" mode="">
							</image>
							<text class="chargeInfor-listtext">卫生间</text>
						</view>
					</view>
				</view>
			</view>

		</view>


		<!-- 用户评论1 -->
		<view class="userComments">

			<view class="userComments-yypl">
				<text>用户评论</text>
			</view>

			<!-- 每一项评论 -->
			<view class="userComments-contents">
				<!-- 评论头像 -->
				<view class="userComments-leftimg">
					<image class="userComments-leftimgicon" src="../../static/images/lrx/image_head1@3x.png" mode="">
					</image>
				</view>

				<!-- 评论详情 -->
				<view class="userComments-middledetail">
					<view class="userComments-telephone">
						185<text>****</text>8845
					</view>

					<view class="userComments-picture">
						<image class="userComments-pictureitem" v-for="item in 5" :key="item"
							src="../../static/images/lrx/icon_star@3x.png" mode=""></image>
					</view>
					<view class="userComments-detail">
						<text>费用很便宜，离家近还方便~~~</text>
					</view>

					<view class="userComments-data">
						<text>2021-02-15</text>
					</view>

				</view>

				<!-- 右边点赞 -->
				<view class="userComments-rightlikes">
					<image class="userComments-rightlikesicon" src="../../static/images/lrx/Button_likesgray@3x.png"
						mode=""></image>
					<text class="userComments-rightlikestext">18</text>
				</view>

			</view>

			<!-- 每一项评论 -->
			<view class="userComments-contents">
				<!-- 评论头像 -->
				<view class="userComments-leftimg">
					<image class="userComments-leftimgicon" src="../../static/images/lrx/image_head2@3x.png" mode="">
					</image>
				</view>

				<!-- 评论详情 -->
				<view class="userComments-middledetail">
					<view class="userComments-telephone">
						185<text>****</text>8845
					</view>

					<view class="userComments-picture">
						<image class="userComments-pictureitem" v-for="item in 5" :key="item"
							src="../../static/images/lrx/icon_star@3x.png" mode=""></image>
					</view>
					<view class="userComments-detail">
						<text>费用很便宜，离家近还方便~~~</text>
					</view>

					<view class="userComments-data">
						<text>2021-02-15</text>
					</view>

				</view>

				<!-- 右边点赞 -->
				<view class="userComments-rightlikes">
					<image class="userComments-rightlikesicon" src="../../static/images/lrx/Button_likesred@3x.png"
						mode=""></image>
					<text class="userComments-rightlikestext">18</text>
				</view>

			</view>
		</view>

		<!--  查看全部 -->
		<view class="lookall">
			查看全部
		</view>

		<!-- 扫一扫 -->
		<view class="userScan">
			<!-- 左边报修和客服 -->
			<view class="userScan-click">
				<navigator url="/pages/repair/repair">
					<view class="userScan-clickItem">
						<image class="userScan-clickItemimg" src="../../static/images/lrx/icon_repair@3x.png" mode="">
						</image>
						<text class="userScan-clickItemtext">报修</text>
					</view>
				</navigator>

				<navigator url="/pages/dialog/dialog">
					<view class="userScan-clickItem">
						<image class="userScan-clickItemimg" src="../../static/images/lrx/image_Customerservice@3x.png">
						</image>
						<text class="userScan-clickItemtext">客服</text>
					</view>
				</navigator>

			</view>
			<view class="userScan-scan" @tap="scanCharge">
				扫一扫
			</view>
		</view>

	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions
	} = createNamespacedHelpers('carCharging')
	export default {
		data() {
			return {
				detailData: {},
				code: "",
			}
		},
		onLoad(options) {
			this.chargeInfor({
				longitude: options.longitude,
				latitude: options.latitude,
				id: options.id
			});
			// 调用获取单个充电桩评价，后端暂无数据
			this.getchargeJudement();
			this.code = options.id;
		},
		methods: {
			...mapActions(["getchargeDetail", "getchargeJudement", "addChargeorder"]),
			async chargeInfor(data) {
				let res = await this.getchargeDetail(data);
				this.detailData = res.data[0];
			},
			// 点击导航图片后开始导航
			gaoDedaohang(lat, lng) {
				uni.openLocation({
					latitude: lat,
					longitude: lng,
				});
			},
			// 扫充电桩
			async scanCharge() {

				let userid = uni.getStorageSync("id");
				// 生成充电订单，成功后跳转
				if (userid && this.detailData.chargeViews[0].code) {
					let data = await this.addChargeorder({
						userid,
						code: this.detailData.chargeViews[0].code
					})
					if (data.data) {
						uni.navigateTo({
							url: `/pages/charging/charging?Chargeorder=${data.data}`
						})
					}
				} else {
					this.$refs.noticelogin.show({
						title: '请先登录',
						type: 'error',
						position: "bottom"
					})
					uni.navigateTo({
						url: '/pages/loginLx/loginLx'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.chargeDtailPage {
		margin-bottom: 100rpx;

		// 充电站上面部分
		.chargeDtailPage-top {
			padding: 30rpx 20rpx 10rpx 20rpx;
			width: 700rpx;
			margin: 0rpx auto;
			// height: 230rpx;
			margin-top: 30rpx;
			background-color: white;
			display: flex;
			border-radius: 30rpx;

			// 充电站左边图片 
			.chargeDtailPage-top-image {
				width: 250rpx;
				height: 200rpx;
			}

			// 充电站中间详情
			.chargeDtailPage-top-content {
				width: 350rpx;
				padding: 0rpx 20rpx 10rpx 20rpx;

				.chargeDtailPage-title {
					font-size: 32rpx;
					margin-bottom: 10rpx;
					font-weight: 700;
				}

				.chargeDtailPage-topaddress {
					font-size: 22rpx;
					color: #919191;
					margin-bottom: 10rpx;
				}

				.chargeDtailPage-toptags {
					.tagsitems {
						font-size: 20rpx;
						background-color: #e8e8e8;
						border-radius: 10rpx;
						padding: 6rpx;
						margin: 20rpx 10rpx 20rpx 0rpx;
					}

				}

				.chargeDtailPage-topprices {
					color: gray;
					font-size: 24rpx;
					margin: 10rpx 0rpx;

					.redprice {
						color: #eb1313;
						font-size: 32rpx;
						font-weight: 700;
					}
				}

			}

			// 充电站右边导航
			.chargeDtailPage-toprigghtnav {
				width: 80rpx;
				text-align: center;
				margin-right: 40rpx;

				.chargeDtailPage-rightimage {
					margin-top: 60rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.chargeDtailPage-righttitle {
					font-size: 24rpx;
					color: gray;
				}

			}
		}

		//电站信息
		.chargeInfor {
			padding: 20rpx;

			.chargeInfor-detail {
				border-left: 6rpx solid #f5610c;
				padding-left: 10rpx;
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: 700;
			}

			.chargeInfor-detailInfor {
				background-color: white;
				border-radius: 30rpx;
				padding: 20rpx 0rpx 20rpx 30rpx;

				.chargeInfor-titletop {
					border-bottom: 2rpx solid #e6e6e6;
					margin-bottom: 10rpx;
					padding-bottom: 10rpx;

					.chargeInfor-yyxq {
						border-left: 6rpx solid #f5610c;
						padding-left: 10rpx;
						font-size: 28rpx;
					}

					.kfitems {
						font-size: 28rpx;
						color: #949494;
						margin: 10rpx;
					}
				}

				.chargeInfor-titlearoud {
					.chargeInfor-zbss {
						border-left: 6rpx solid #f5610c;
						padding-left: 10rpx;
						font-size: 28rpx;
					}
				}

				.chargeInfor-list {
					display: flex;
					margin-top: 10rpx;

					.chargeInfor-listitem {
						width: 150rpx;
						text-align: center;
						padding: 10rpx 25rpx;

						.chargeInfor-listimg {
							width: 100rpx;
							height: 100rpx;
						}

						.chargeInfor-listtext {
							font-size: 24rpx;
							color: gray;
						}
					}

				}
			}
		}

		// 用户评论
		.userComments {
			padding: 20rpx;

			.userComments-yypl {
				border-left: 6rpx solid #f5610c;
				padding-left: 10rpx;
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: 700;
			}

			.userComments-contents {
				background-color: white;
				border-radius: 30rpx;
				padding: 20rpx;
				display: flex;
				margin-bottom: 2rpx;

				// 左边头像
				.userComments-leftimg {
					.userComments-leftimgicon {
						width: 100rpx;
						height: 100rpx;
					}

				}

				// 中间评论
				.userComments-middledetail {
					width: 460rpx;
					padding-left: 20rpx;

					.userComments-telephone {
						color: gray;
						font-size: 24rpx;
					}

					.userComments-picture {
						.userComments-pictureitem {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.userComments-detail {
						font-size: 26rpx;
						margin-bottom: 20rpx;
					}

					.userComments-data {
						font-size: 24rpx;
						color: gray;
					}

				}

				.userComments-rightlikes {
					width: 96rpx;
					padding-top: 60rpx;

					.userComments-rightlikesicon {
						width: 60rpx;
						height: 60rpx;
						vertical-align: middle;
					}

					.userComments-rightlikestext {
						font-size: 24rpx;
					}
				}
			}
		}

		// 查看全部
		.lookall {
			text-align: center;
			font-size: 28rpx;
			color: #f5742a;
		}

		// 扫一扫
		.userScan {
			display: flex;
			padding: 20rpx;
			margin: 40rpx;
			border-radius: 100rpx;
			background-color: white;
			maigin-bottom: 100rpx;

			.userScan-click {
				width: 300rpx;
				display: flex;
				padding-left: 20rpx;

				.userScan-clickItem {
					width: 100rpx;
					padding: 0rpx 20rpx;
					text-align: center;

					.userScan-clickItemimg {
						width: 50rpx;
						height: 50rpx;
						// margin: 0rpx;
						// padding: 0rpx;
					}

					.userScan-clickItemtext {
						color: gray;
						font-size: 24rpx;
						margin-top: 0rpx;
					}
				}
			}

			// 扫一扫
			.userScan-scan {
				background-color: #f5610c;
				border-radius: 80rpx;
				color: white;
				text-align: center;
				width: 250rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin-left: 40rpx;
				margin-top: 16rpx;
				font-size: 30rpx;
			}

		}
	}
</style>
